<template>
  <span>{{t}}</span>
</template>
<script>
export default {
  data() {
    return {
      timer: undefined,
      t: this.time,
    };
  },
  props: {
    time: {
      type: Number,
      default: 0,
    },
    startTime: {
      type: Number,
      default: 0,
    },
  },
  created() {
    const newTime = new Date().getTime();
    this.t = Math.round(this.time - ((newTime - this.startTime) / 1000));
    this.countdown();
    this.timer = setInterval(() => {
      this.countdown();
    }, 1000);
  },
  methods: {
    countdown() {
      this.t = parseInt((this.t - 1), 10);
      if (this.t <= 0) {
        this.$emit('countdownend');
        clearInterval(this.timer);
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
